<template>
  <div class="community-details">
    <div class="header">
      <div class="name__wrapper">
        <div class="left">
          <span class="title">社区详情</span>
          <span class="status" :style="{ background: getStatusColor() }">{{
            statusText
          }}</span>
        </div>
        <div class="right">
          <el-icon><CircleClose @click="closeDialog" /></el-icon>
        </div>
      </div>
    </div>

    <div class="body">
      <div class="tab-bar-wrapper">
        <el-tabs
          tab-position="left"
          class="tabs"
          v-model="tabActive"
          type="card"
        >
          <el-tab-pane
            v-for="(item, index) in Object.keys(tabBarList)"
            :key="index"
            :label="tabBarList[item]"
            :name="item"
          >
            <component
              :is="item[0].toUpperCase() + item.slice(1)"
              :info="communityInfos.data[item]"
              :pkid="pkid"
              class="community-info-component"
              @commitApplyStatus="getApplyStatus"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="community-info-content"></div>
    </div>
    <div class="footer">
      <el-button
        v-show="statusText === '已通过' || statusText === '待审核'"
        class="primary"
        @click="applyRecord"
        >审核</el-button
      >
    </div>
  </div>
</template>

<script lang="ts">
import CommunityBaseInfo from './components/CommunityBaseInfo.vue'
import CommunityGovernanceInfo from './components/CommunityGovernanceInfo.vue'
import CommunityPublicServiceInfo from './components/CommunityPublicServiceInfo.vue'
import CommunitySupportingFacilitiesInfo from './components/CommunitySupportingFacilitiesInfo.vue'
import CommunityActivitySpaceInfo from './components/CommunityActivitySpaceInfo.vue'
import CommunityFeaturedFacilitiesInfo from './components/CommunityFeaturedFacilitiesInfo.vue'
import CommunityConvenientInfo from './components/CommunityConvenientInfo.vue'
import AuditRecords from './components/AuditRecords.vue'

export default {
  components: {
    CommunityBaseInfo,
    CommunitySupportingFacilitiesInfo,
    CommunityGovernanceInfo,
    CommunityPublicServiceInfo,
    CommunityActivitySpaceInfo,
    CommunityFeaturedFacilitiesInfo,
    CommunityConvenientInfo,
    AuditRecords,
  },
}
</script>

<script lang="ts" setup>
import { reactive, ref, watch } from 'vue'
import { queryCommunityInfoById } from '@/utils/http/api/region'
import { CircleClose } from '@element-plus/icons-vue'

const applyStatus: { [key: string]: string } = {
  '0': '待审核',
  '1': '已通过',
  '-1': '已退回',
  '-2': '未提交',
}

const props = defineProps({
  pkid: {
    type: String,
    default: '',
  },
  communityId: {
    type: String,
    default: '',
  },
})

const emits = defineEmits(['update:pkid', 'applyRecord', 'closeDialog'])

const statusText = ref('待审核')

const getStatusColor = (alpha: number = 0.6) => {
  switch (statusText.value) {
    case '已退回':
      // rejected;
      return `rgba(255,0,0,${alpha})`
    case '待审核':
      // submitted
      return `rgba(255,167,73,${alpha})`
    case '已通过':
      // passed
      return `rgba(0,255,0,${alpha})`
    default:
      // saved
      return `rgba(0,0,255,${alpha})`
  }
}
const applyRecord = () => {
  emits('applyRecord')
}
const tabBarList: { [key: string]: string } = {
  communityBaseInfo: '社区信息',
  communityGovernanceInfo: '社区治理',
  communityPublicServiceInfo: '公共服务',
  communitySupportingFacilitiesInfo: '市政配套',
  communityActivitySpaceInfo: '活动空间',
  communityFeaturedFacilitiesInfo: '特色设施',
  communityConvenientInfo: '便民设施',
  auditRecords: '审核记录',
}

const communityInfos = reactive({
  data: {},
})

const tabActive = ref('communityBaseInfo')

const getCommunityInfo = (pkid: string, communityId: string = '') => {
  queryCommunityInfoById(pkid, communityId).then((res) => {
    if (res.success) {
      emits('update:pkid', res.data.communityBaseInfo.pkid || '')
      communityInfos.data = res.data
    }
  })
}

const getApplyStatus = (status: string) => {
  statusText.value = applyStatus[status]
}

const closeDialog = () => {
  emits('closeDialog')
}

watch(
  () => props.pkid,
  (val) => {
    if (val) {
      tabActive.value = 'communityBaseInfo'
      if (!props.communityId) {
        getCommunityInfo(val)
      } else {
        getCommunityInfo(val, props.communityId)
      }
    } else {
      if (props.communityId) {
        getCommunityInfo('', props.communityId)
      }
    }
  }
)

watch(
  () => props.communityId,
  (val) => {
    if (val) {
      getCommunityInfo('', val)
    }
  }
)
</script>

<style lang="scss" scoped>
.community-details {
  @extend %column;

  width: 290px;
  min-height: 200px;
  position: absolute;
  top: calc($one-map-top-padding + 5px);
  right: 70px;
  background-color: white;
  box-shadow: 0 0 6px 0 rgba(0, 10, 19, 0.2);
  border-radius: 4px;
  overflow: hidden;
  z-index: 20;
  height: calc(
    100vh - $app-header-height - $map-utils-top - $map-utils-bottom - 5px
  );

  .header {
    @extend %row-align-center;
    border-bottom: 1px solid #f3f3f9;
    padding-bottom: 10px;
    .name__wrapper {
      @extend %row-align-center;

      width: 262px;
      height: 35px;
      margin-left: 11px;
      margin-top: 10px;
      justify-content: space-between;
      align-items: center;
      background-image: url('@/assets/images/one-map/community-region-popup-name-background.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .left {
      margin-left: 21px;
      margin-top: -4px;
    }

    .right {
      line-height: 21px;
      .el-icon {
        &:hover {
          cursor: pointer;
        }
      }
    }

    span.title {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 14px;
      color: black;
    }

    .status {
      width: 54px;
      height: 22px;
      display: inline-block;
      margin-left: 82px;
      border-radius: 8px;
      font-size: 14px;
      line-height: 22px;
      text-align: center;
      //background-color: rgba(255,255,0,0.4);
    }
  }

  .body {
    height: 80%;
    @extend %column;

    .tab-bar-wrapper {
      height: 100%;

      .tabs {
        height: 100%;

        :deep(.el-tabs__content) {
          height: 100%;

          .el-tab-pane {
            height: 100%;
          }
        }

        :deep(.el-tabs__nav) {
          height: 100%;

          .el-tabs__item {
            height: calc(100% / 7);
            writing-mode: tb;
            display: block;
            text-align: center;
            padding: 0 15px;

            &:hover {
              color: #28b1e4;
            }
          }

          .el-tabs__item.is-active {
            border-right: none;
            color: #fff;
            background-color: #28b1e4;
          }
        }

        :deep(.community-info-component) {
          .remark {
            margin-left: 8px;
            margin-bottom: 6px;
            line-height: 18px;
            font-size: 12px;
            color: rgba(158, 161, 173, 1);
            padding-right: 6px;
          }
        }
      }
    }
  }

  .footer {
    margin-top: 20%;
    width: 100%;
    text-align: center;
  }
}
</style>
